<template>
  <div>
    <div class="title">
      <h1>北京市政府信息化预算解析</h1>
      <h2>三班 第9组</h2>
    </div>

    <div class="tableBox">
      <el-table
        ref="filterTable"
        row-key="id"
        :data="tableData.filter((data) => !search || filterSearch(data))"
        style="width: 100%"
        max-height="580"
        stripe
        show-summary
        :summary-method="getSum"
      >
        <el-table-column
          prop="id"
          label="序号"
          sortable
          width="80"
          column-key="id"
        />
        <el-table-column prop="name" label="项目名称" width="150" />
        <el-table-column
          prop="type"
          label="项目类型"
          width="150"
          :filters="type"
          :filter-method="filterTag"
        />
        <el-table-column
          prop="department"
          label="一级主管部门"
          width="150"
          :filters="department"
          :filter-method="filterTag"
        />
        <el-table-column
          prop="company"
          label="项目申报单位"
          width="150"
          :filters="company"
          :filter-method="filterTag"
        />
        <el-table-column
          prop="property"
          label="项目属性"
          width="100"
          :filters="property"
          :filter-method="filterTag"
        />
        <el-table-column prop="ddl" label="项目期" width="100" />
        <el-table-column prop="person" label="实施负责人" width="100" />
        <el-table-column prop="tel" label="负责人联系电话" width="150" />
        <el-table-column
          prop="money"
          label="年度资金总额(万元)"
          sortable
          width="170"
        />
        <!-- <el-table-column prop="target" label="总体目标" width="450" /> -->
        <el-table-column type="expand" label="总体目标" width="90">
          <template #default="props">
            <h4>总体目标: </h4>
            <p>{{ props.row.target }}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="isInfo"
          label="信息化项目"
          width="120"
          :filters="[
            { text: '是', value: '是' },
            { text: '否', value: '否' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        /> -->
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="mini" placeholder="检索" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="box"></div> -->
  </div>
</template>

<script>
import { data } from "../data";
const dataList = require("../../../../result/result.json");
console.log(dataList.list.length);
const vm = {
  name: "tablePage",
  data() {
    return {
      // tableData: data,
      tableData: dataList.list,
      search: "",
      type: [],
      department: [],
      company: [],
      property: [],
    };
  },
  methods: {
    filterTag(value, row, e) {
      return row[e.property] === value;
    },
    filterSearch(arg) {
      return (
        arg.id.toString().includes(this.search) ||
        arg.name.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.type.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.department.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.company.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.property.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.ddl.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.person.toLowerCase().includes(this.search.toLowerCase()) ||
        arg.tel.toString().includes(this.search.toLowerCase()) ||
        arg.money.toString().includes(this.search.toLowerCase()) ||
        arg.target.toLowerCase().includes(this.search.toLowerCase())
      );
    },
    addData(data) {
      const self = this;
      self.tableData.push(data);
    },
    getSum(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (column.label == "负责人联系电话") {
          sums[index] = "总和(万元)：";
          return;
        } else if (column.label == "年度资金总额(万元)") {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = `${values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0)}`;
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
  },
  created() {
    window.addData = this.addData;
    const typeBuffer = [];
    const depBuffer = [];
    const comBuffer = [];
    const proBuffer = [];
    for (const data of dataList.list) {
      if (typeBuffer.indexOf(data.type) < 0) {
        this.type.push({ text: data.type, value: data.type });
        typeBuffer.push(data.type);
      }
      if (depBuffer.indexOf(data.department) < 0) {
        this.department.push({ text: data.department, value: data.department });
        depBuffer.push(data.department);
      }
      if (comBuffer.indexOf(data.company) < 0) {
        this.company.push({ text: data.company, value: data.company });
        comBuffer.push(data.company);
      }
      if (proBuffer.indexOf(data.property) < 0) {
        this.property.push({ text: data.property, value: data.property });
        proBuffer.push(data.property);
      }
    }
  },
};

export default vm;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  background-color: rosybrown;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.tableBox {
  text-align: center;
  margin-top: 20px;
}

.box {
  height: 50px;
  background-color: rosybrown;
}
</style>
